<template>
  <div>
    <el-tabs type="border-card">
  <el-tab-pane label="编辑单元">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="小区名称" prop="name" style="width:600px;">
    <el-input v-model="communityname"></el-input>
  </el-form-item>
  <el-form-item label="单元名称" prop="region" style="width:600px;">
    <el-input v-model="unitname"></el-input>
  </el-form-item>
  <el-form-item label="栋数" prop="date1" style="width:600px;">
    <el-input v-model="unitnum"></el-input>
  </el-form-item>
   <el-form-item label="状态选择" prop="status">
    <el-select v-model="unitstatus" placeholder="请选择状态">
      <el-option label="已建成" value="1"></el-option>
      <el-option label="未建成" value="2"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="咨询问候" style="width:1500px">
  <vue-ueditor-wrap 
      v-model="unitcontext" 
      :config="editorConfig" 
    ></vue-ueditor-wrap>
    </el-form-item>
    <div class="anniu">
        <el-button type="primary" icon="el-icon-refresh-left" style="margin-left:10px" @click="back">返回</el-button>
        <el-button type="primary" icon="el-icon-document" style="margin-top:10px;" @click="keep">保存</el-button>
    </div>
</el-form>
  </el-tab-pane>
  
</el-tabs>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
    components: { VueUeditorWrap },
    data() {
      
      return {
        id:"",
        communityname:"",
            unitname:"",
            unitnum:"",
            unitstatus:"",
            unitcontext:"",
        
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          status:'',
        },
        content: '', // 双向绑定的富文本内容
      editorConfig: {
        UEDITOR_HOME_URL: '/UEditor/', // 指向 public 下的 UEditor 目录
        initialFrameHeight: 300, // 编辑器高度
          toolbars: [
          [
            // 第一组：源码、撤销、重做
            'source', '|', 
            'undo', 'redo', '|',
            
            // 第二组：基础格式
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'superscript', 'subscript', '|',
            'formatmatch', 'removeformat', '|',
            
            // 第三组：字体设置
            'fontfamily', 'fontsize', '|',
            'forecolor', 'backcolor', '|',
            
            // 第四组：对齐与列表
            'alignleft', 'aligncenter', 'alignright', 'alignjustify', '|',
            'insertorderedlist', 'insertunorderedlist', '|',
            'outdent', 'indent', '|',
            
            // 第五组：链接与媒体
            'link', 'unlink', '|',
            'insertimage', '|',
            'emotion', '|',
            
            // 第六组：代码与表格
            'insertcode', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 
            'insertrow', 'deleterow', 'insertcol', 'deletecol', 
            'mergecells', 'splittocells', '|',
            
            // 第七组：其他功能
            'hr', '|',
            'searchreplace', '|',
            'fullscreen'
          ]
        ],
        
        // 字体配置（显示arial等选项）
        fontfamily: [
          { name: 'Arial', val: 'arial,helvetica,sans-serif' },
          { name: '宋体', val: 'simsun,serif' },
          { name: '微软雅黑', val: 'microsoft yahei' },
          { name: 'Times New Roman', val: 'times new roman,times' }
        ],
        
        // 字号配置（包含16px）
        fontsize: [10, 12, 14, 16, 18, 20, 24, 28, 32, 48]
      },
    
        
        rules: {
          name: [
            { required: false, message: '小区名称不能为空', trigger: 'blur' },
            
          ],
          region: [
            { required: false, message: '单元名称不能为空', trigger: 'blur' }
          ],
          date1: [
            { required: false, message: '栋数不能为空', trigger: 'blur' }
          ],
         status: [
            { required: false, trigger: 'change' }
          ],
        }
      };
    },
    methods: {
        getlist(){
            this.communityname = localStorage.getItem("communityname")
            this.unitname = localStorage.getItem("unitname")
            this.unitnum = localStorage.getItem("unitnum")
            this.unitstatus = localStorage.getItem("unitstatus")
            this.unitcontext = localStorage.getItem("unitcontext")
            this.id = localStorage.getItem("id")
        },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      back(){
        this.$router.replace("unit")
      },
      async keep(){
        let res = await this.$axios.post("http://community.byesame.com/house/updateunitList",{
            u_id:this.id,
            communityname:this.communityname,
            unitname:this.unitname,
            unitnum:this.unitnum,
            unitstatus:this.unitstatus,
            unitcontext:this.unitcontext,
            token:"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwidXNlcm5hbWUiOiJhZG1pbiIsImVtYWlsIjoiMjQ1MzMxNzM1N0BxcS5jb20iLCJoZWFkIjoiMjAyNTEwMjQwODUxMDY5ODE1MDEuanBnIiwidHlwZSI6IjEiLCJpYXQiOjE3NjEyNjgxNTAsImV4cCI6MTc2MTM1NDU1MH0.Q8Fy8UVNjf-u9ZwGdan7NtDqbPOIIuydoiwAwyV9l48"
        })
        console.log(res);
        console.log(this.ruleForm.status);
        
        this.$router.replace("unit")
      }
    },
    created(){
        this.getlist();
    }
}
</script>

<style>

</style>